<script setup lang="ts" name="GoodsSku">
import { PropType } from 'vue'
import { GoodsType, SpecsValuesItem, SpecsItem } from '@/types/data'
import bwPowerSet from '@/utils/power-set'
import { SkusItem } from '@/types/data'
const props = defineProps({
  goodsInfo: {
    type: Object as PropType<GoodsType>,
    required: true
  }
})
const emits = defineEmits<{
  (e: 'getSelected', sku: SkusItem): void
}>()
// 拿到用户已选择属性集合
function getUserSelected () {
  const arr: string[] = []
  props.goodsInfo.specs.forEach((item, index) => {
    // find  找到返回找到项的数据，找不到返回undefined
    const result = item.values.find(sub => {
      return sub.selected
    })
    arr[index] = result ? result.name : ''
  })
  return arr
}

// 生成数据字典
const pathArr: { [e: string]: boolean } = {}
function getPathArr () {
  props.goodsInfo.skus
    // 1：排除库存为0的项
    .filter(v => v.inventory)
    .forEach(item => {
      // 列出所有的属性组件的二维数组
      const tempArr = bwPowerSet(item.specs.map(i => i.valueName))
      // 将二维数组转换成一维数组
      tempArr
        .map(sub => {
          return sub.join('★')
        })
        .forEach(t => {
          // 将每个属性添加到数据字典中
          pathArr[t] = true
        })
    })
  // console.log('pathArr', pathArr)
}
getPathArr()

// 默认是否禁用某属性
// function updateSpecsDisabled () {
//   // ['','','']
//   props.goodsInfo.specs.forEach(item => {
//     item.values.forEach(i => {
//       // i.disabled=i.name的值在数据字典是是否存在，不存在为true,存在false
//       i.disabled = !pathArr[i.name]
//     })
//   })
//   // console.log(props.goodsInfo.specs)
// }
// updateSpecsDisabled()

// 判断没选择的属性是否要禁用
updateSpecsDisabled2()
function updateSpecsDisabled2 () {
  // 拿到用户已选择属性
  props.goodsInfo.specs.forEach((item, index) => {
    let userSelectedArr = getUserSelected() // ['黑色','日本','']  ===》黑色★日本
    item.values.forEach(sub => {
      // 已选择的属性没必要再判断了
      if (sub.selected) {
        return
      }
      // 没有选择的属性去判断
      // 假设当该属性已选中
      userSelectedArr[index] = sub.name
      // 拿到他们的组合属性到数据字典中查询
      let temp = userSelectedArr.filter(v => v).join('★')
      // 查询 数据字典，有库存就不禁用，没有就禁用
      sub.disabled = !pathArr[temp]
      // 还原已选择属性
      // userSelectedArr = getUserSelected()
    })
  })
}

// 商品属性点击选择事件
const selectEvent = (i: SpecsValuesItem, item: SpecsItem) => {
  if (i.disabled) {
    return
  }
  if (i.selected) {
    // 如果是取消某属性选择
    i.selected = false
  } else {
    // 如果是选中某属性，先取消所有属性的选择，再选中当前属性
    // 取消已选中的项
    item.values.forEach(sub => (sub.selected = false))
    i.selected = true
  }
  // 拿到用户已选择属性
  // console.log(getUserSelected())
  // 判断余下的没有选择的属性是否应该禁用
  updateSpecsDisabled2()
  // 如果用户选择已选择完成，将已选择的sku数据传递给父组件
  const selectArr = getUserSelected()
  if (selectArr.filter(v => v).length === props.goodsInfo.specs.length) {
    // 将已选择的sku数据传递给父组件
    // 找出已选择数据的sku
    const userSelectStr = selectArr.join('★')
    const findResult = props.goodsInfo.skus.find(item => {
      return userSelectStr === item.specs.map(s => s.valueName).join('★')
    })
    if (findResult) {
      // 通知父组件，子传父
      emits('getSelected', findResult)
    }
  }
}
</script>
<template>
  <div class="goods-sku">
    <dl v-for="(item, index) in goodsInfo.specs" :key="index">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="(i, index2) in item.values" :key="index2">
          <span
            v-if="!i.picture"
            :class="{ selected: i.selected, disabled: i.disabled }"
            @click="selectEvent(i, item)"
            >{{ i.name }}</span
          >
          <img
            @click="selectEvent(i, item)"
            v-else
            :src="i.picture"
            :class="{ selected: i.selected, disabled: i.disabled }"
            alt=""
          />
        </template>
      </dd>
    </dl>
    <!-- <dl>
      <dt>尺寸</dt>
      <dd>
        <span class="disabled">10英寸</span>
        <span class="selected">20英寸</span>
        <span>30英寸</span>
      </dd>
    </dl>
    <dl>
      <dt>版本</dt>
      <dd>
        <span>美版</span>
        <span>港版</span>
      </dd>
    </dl> -->
  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
